* {
    padding: 0;
    margin: 0;
}

header {
    height: 60px;
    background: red;
}

.aaa {
    width: 400px;
    height: 400px;
    /* background: red; */
    animation-name: bbb;
    animation-duration: 3s;
    /* animation-iteration-count: infinite; */
    /* animation-direction: alternate-reverse; */
    animation-fill-mode: forwards;
}
@keyframes bbb{
    0% {
        width: 400px;
        background: red;
    }
    25% {
        width: 500px;
        background: orange;
    }
    50% {
        width: 600px;
        background: yellowgreen;
    }
    75% {
        width: 700px;
        background: yellow;
    }
    100% {
        width: 800px;
        background: blueviolet;
    }
}
.aaa:hover {
    animation-play-state: paused;
}

.ccc {
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.ddd{  
     width: 900px;
     height: 300px;
     animation-name: ddd;
     animation-duration: 8s;
     animation-iteration-count: infinite;
}
.ddd img {
    float: left;
    width: 300px;
    height: 300px;
}
@keyframes ddd {
    0% {
        margin-left:  0;
    }
    25% {
        margin-left: 0;
    }
    37% {
        margin-left: -300px;
    }
    62% {
        margin-left: -300px;
    }
    75% {
        margin-left: -600px;
    }
    100% {
        margin-left: -600px;
    }

}